<template>
  <view class="user">
    <view class="icon">
      <image src="/static/image/user.png" />
    </view>
    <view class="info_box">
      <view class="flex fl1 user_info">
        <view class="userName">{{ user.userName }}</view>
      </view>
      <view class="fl1 company_info">
        <view class="postName flex">
          <view>部门</view>
          <u-line direction="col" color="#888888" length="20rpx" margin="10rpx"></u-line>
          <view style="color: #333">{{ user.deptName }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

<style scoped lang="scss">
.user {
  display: flex;
  background-color: white;
  border-radius: 10rpx;
  padding: 20rpx;
  .icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .info_box {
    flex: 2;
    display: flex;
    flex-direction: column;
    .user_info {
      flex: 1;
      display: flex;
      align-items: flex-end;
      .userName {
        font-size: 45rpx;
        line-height: 45rpx;
        color: rgb(12, 12, 21);
        margin-right: 20rpx;
      }
      .postName {
        color: rgb(140, 143, 151);
        font-size: 26rpx;
      }
    }
    .company_info {
      flex: 1;
      display: flex;
      align-items: center;
      color: rgb(140, 143, 151);
      font-size: 26rpx;
    }
  }
}
</style>
